<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @add="handleAdd"
      @edit="handleUpdate"
    >

      <template #filter-content/>

      <template #data-columns>

        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column
          align="center"
          label="名称"
          prop="title"
        />

        <el-table-column
          align="center"
          label="轮播图片"
        >

          <template v-slot="scope">
            <el-image :src="scope.row.banner" style="height: 60px; width: auto" />
          </template>

        </el-table-column>

        <el-table-column
          align="center"
          label="所属平台"
          prop="platform_dictText"
        />

        <el-table-column
          align="center"
          label="链接地址"
          prop="link"
        />

        <el-table-column
          align="center"
          label="排序"
          prop="sort"
        />

      </template>
    </data-table>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="轮播管理" width="50%" @close="dialogVisible = false">

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="120px">

        <el-form-item label="轮播标题" prop="title">
          <el-input v-model="postForm.title" size="small" />
        </el-form-item>

        <el-form-item label="所属平台" prop="platform">
          <dic-list-select v-model="postForm.platform" dic-code="banner_platform"/>
          <small style="margin-left: 10px">目前仅支持移动端</small>
        </el-form-item>

        <el-form-item label="轮播图片" prop="banner">
          <file-upload v-model="postForm.banner"/>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="postForm.sort" :min="0" :max="99999" size="small"/>
          <small style="margin-left: 10px">数值越大越靠前</small>
        </el-form-item>

        <el-form-item label="跳转链接">
          <el-input v-model="postForm.link" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import { detail, save } from '@/api/sys/config/banner'
import FileUpload from '@/components/FileUpload'
import DicListSelect from '@/components/DicListSelect'

export default {
  components: { DicListSelect, FileUpload, DataTable },
  data() {
    return {

      dialogVisible: false,

      listQuery: {
        current: 1,
        size: 10,
        params: {
        }
      },

      postForm: {
        sort: 0
      },

      rules: {
        title: [{ required: true, trigger: 'blur', message: '轮播名称不能为空！' }],
        platform: [{ required: true, trigger: 'blur', message: '所属平台不能为空！' }],
        banner: [{ required: true, trigger: 'blur', message: '轮播图片必须上传！' }],
        sort: [{ required: true, trigger: 'blur', message: '排序必须设置！' }]
      },

      options: {
        add: {
          enable: true,
          permission: 'sys:banner:add'
        },
        edit: {
          enable: true,
          permission: 'sys:banner:update'
        },
        delete: {
          enable: true,
          permission: 'sys:banner:delete',
          url: '/api/sys/config/banner/delete'
        },
        // 列表请求URL
        listUrl: '/api/sys/config/banner/paging'
      }
    }
  },

  created() {

  },

  methods: {

    handleAdd() {
      this.postForm = {}
      this.dialogVisible = true
    },

    handleUpdate(id) {
      this.dialogVisible = true
      detail(id).then(res => {
        this.postForm = res.data
      })
    },

    handleSave() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          save(this.postForm).then(() => {
            this.$message({
              type: 'success',
              message: '轮播图保存成功!'
            })
            this.dialogVisible = false
            this.$refs.pagingTable.getList()
          })
        }
      })
    }
  }
}
</script>

<style>

  .el-dialog__body{
    padding: 0px 20px;
  }
</style>
